<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}
			.slider-wrap {
				position: relative;
				width: 400px;
				height: 20px;
				background: #eee;
				z-index: 2;
			}

			.slider-wrap2 {

				width: 20px;
				height: 400px;

			}

			.slider-bar {
				position: absolute;
				width: 50px;
				height: 20px;
				background: #ccc;
				z-index: 2;
			}

			.slider-bar2 {
				width: 20px;
				height: 50px;
				background: #ccc;
			}

			.fixed-button {
				position: fixed;
				left: 20px;
				top: 100px;
				width: 100px;
				height: 100px;z-index: 2;
				-webkit-transition: .3s ease;
				transition: .3s ease;
				background: lightblue;}
			.area{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				background:rgba(0,0,0,0.3)
			}
		</style>
	</head>
	<body>
		<div class="slider-wrap">
			<div class="slider-bar slider-bar1"></div>
		</div>

		<div class="slider-wrap slider-wrap2">
			<div class="slider-bar slider-bar2"></div>
		</div>
		<div class="fixed-button">发布</div>
		<div class="area"></div>
		<div class="container" style="height: 2000px;">
			
		</div>
		<script src="slider.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var wWidth = (document.documentElement.clientWidth || docment.body.clientWidth) - document.querySelector(
					'.fixed-button').clientWidth
				var wHeight = (document.documentElement.clientHeight || docment.body.clientHeight) - document.querySelector(
					'.fixed-button').clientHeight

				var a = new Slider({
					el: document.querySelector('.slider-bar1'),
					dir: 'x',
					max: 350,
					min: 0,
					val: 0
				})
				var b = new Slider({
					el: document.querySelector('.slider-bar2'),
					dir: 'y',
					max: 350,
					min: 0,
					val: 0
				})
				var c = new Slider({
					el: document.querySelector('.fixed-button'),
					dir: 'all',
					
					val: [0, 0],
					onMove:function(vals){
						console.log(vals);
					}
				})

				setTimeout(function() {
					c.setValue([200, 200])
				}, 6000)
				
				var area = document.querySelector('.area');
				var xBtn = false;
				var yBtn = false;
				var orgX=0;
				var orgY=0;
				var axisX=0;
				var axisY=0;
				area.addEventListener('mousedown',function(e){
					var e = e || window.event;
					orgX=e.clientX-axisX;
					orgY=e.clientY-axisY;
					newX=e.clientX;
					newY=e.clientY;
					e.preventDefault()
					document.onmousemove=function(e){
						
						var e = e || window.event;
						// 判断横向和纵向
						if(Math.abs(e.clientX-newX)>Math.abs(e.clientY-newY)){
							xBtn=true;
							yBtn=false;
						}else if(Math.abs(e.clientX-newX)<Math.abs(e.clientY-newY)){
							xBtn=false;
							yBtn=true;
						}
						console.log(xBtn,yBtn);
						if(xBtn){
							axisX=e.clientX-orgX;
							if(axisX>=500){
								axisX=500
							}
							if(axisX<=0){
								axisX=0
							}
							var bfb = Math.ceil(axisX/5)+'%'
							a.setValue(axisX/500*350)
							console.log(bfb);
						}
						if(yBtn){
							axisY=e.clientY-orgY;
							if(axisY>=500){
								axisY=500
							}
							if(axisY<=0){
								axisY=0
							}
							var bfb2 = Math.ceil(axisY/5)+'%'
							b.setValue(axisY/500*350)
							console.log(bfb2);
						}
						e.preventDefault()
					}
					document.onmouseup=function(e){
						xBtn=false;
						yBtn=false;
						document.onmousemove=document.onmouseup=null;
					}
				})
			}




			



			
		</script>
	</body>
</html>
